<template>

  <div id="aCoursesList" class="bg-fa of">

    <!-- 讲师列表 开始 -->

    <section class="container">

      <header class="comm-title all-teacher-title">

        <h2 class="fl tac">

          <span class="c-333">八大天王</span>

        </h2>

        <section class="c-tab-title">

          <a id="subjectAll" title="全部" href="#">热门讲师</a>

          <!-- <c:forEach var="subject" items="${subjectList }">

                            <a id="${subject.subjectId}" title="${subject.subjectName }" href="javascript:void(0)" onclick="submitForm(${subject.subjectId})">${subject.subjectName }</a>

          </c:forEach>-->

        </section>

      </header>

      <section class="c-sort-box unBr">

        <div>


          <section class="no-data-wrap" v-if="total===0">

            <em class="icon30 no-data-ico">&nbsp;</em>

            <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>

          </section>


          <article class="i-teacher-list">
            <ul class="of">
              <li v-for="item in tableData" :key="item.id">
                <section class="i-teach-wrap">
                  <div class="i-teach-pic">
                    <a :href="'/teacher/'+item.id" :title="item.name" target="_blank">
                      <img :src="item.avatar" alt>
                    </a>
                  </div>
                  <div class="mt10 hLh30 txtOf tac">
                    <a href="/teacher/1" :title="item.name" target="_blank" class="fsize18 c-666">{{item.name}}</a>
                  </div>
                  <div class="hLh30 txtOf tac">
                    <span
                      class="fsize14 c-999"
                    >{{item.intro}}</span>
                  </div>
                  <div class="mt15 i-q-txt">
                    <p class="c-999 f-fA">{{item.intro}}</p>
                  </div>
                </section>
              </li>
            </ul>
            <div class="clear"></div>
          </article>
        </div>

        <!-- 公共分页 开始 -->

<!--        <div>-->

<!--          <div class="paging">-->

<!--            &lt;!&ndash; undisable这个class是否存在，取决于数据属性hasPrevious &ndash;&gt;-->

<!--            <a href="#" title="首页">首</a>-->

<!--            <a href="#" title="前一页">&lt;</a>-->

<!--            <a href="#" title="第1页" class="current undisable">1</a>-->

<!--            <a href="#" title="第2页">2</a>-->

<!--            <a href="#" title="后一页">&gt;</a>-->

<!--            <a href="#" title="末页">末</a>-->

<!--            <div class="clear"></div>-->

<!--          </div>-->

<!--        </div>-->

        <!-- 公共分页 结束 -->

      </section>

    </section>

    <!-- /讲师列表 结束 -->

  </div>

</template>

<script>
  import { IndexTeacherPage } from '@/api/Teacher'
  export default {
    data(){
      return {
        total:'',
        tableData: []
      }
    },
    methods:{
      getTeacher(){
        IndexTeacherPage(1,8).then(res=>{
          this.total = res.data.total
          this.tableData = res.data.records
        })
      }
    },
    created() {
      this.getTeacher()
    }
  };

</script>
